<template>
    <div class="m">
        <div class="login-1" v-if="!registerFlag">
            <div style="width: 100%; text-align: center;margin-top: 10px;"><h3>宠物商店用户登录</h3></div>
            <div class="input-group">
                <el-input v-model="userName" placeholder="请输入用户名"></el-input>
                <el-input v-model="password" placeholder="请输入密码"></el-input>
            </div>
            <div class="bt">
                <el-button type="primary" @click="login()">登录</el-button>
                <el-button type="warning" @click="registerFlag = true">注册</el-button>
            </div>
        </div>
        <div class="login-1 reg" v-if="registerFlag">
            <div style="width: 100%; text-align: center;margin-top: 10px;"><h3>宠物商店用户注册</h3></div>
            <div class="input-group" style="height: 250px;">
                <el-input v-model="userName" placeholder="请输入用户名"></el-input>
                <el-input v-model="password" placeholder="请输入密码" ></el-input>
                <el-input v-model="phoneNum" placeholder="请输入电话"></el-input>
                <el-input v-model="address" placeholder="请输入地址"></el-input>
                <el-input v-model="name" placeholder="您的名称" v-if="registerFlag"></el-input>
            </div>
            <div class="bt">
                <el-button type="warning" @click="register()">提交注册</el-button>
                <el-button type="warning" @click="registerFlag=!registerFlag">返回</el-button>
            </div>
        </div>

        <router-view></router-view>
    </div>

</template>

<script>
    import Cookie from 'js-cookie'

    export default {
        name: "login",
        data() {
            return {
                userName: '',
                password: '',
                name: '',
                phoneNum:'',
                address:'',
                registerFlag: false
            }
        },
        methods: {
            login() {
                console.log("12312312312312")
                this.$http.post('user/login', {
                    userName: this.userName,
                    password: this.password
                }).then(data => {
                    if (data.data.code == 100000) {
                        Cookie.set("token",data.data.data)
                        this.$router.push("/")
                    } else {
                        this.$message.error(data.data.msg)
                    }
                })
            },
            register() {
                if(this.phoneNum===""){
                        this.$message.error("手机号不能为空");
                        return;
                }
                if(this.password===""){
                    this.$message.error("密码不能为空");
                    return;
                }
                this.$http.post('user/register',{
                    userName:this.userName,
                    password:this.password,
                    name : this.name,
                    phoneNum: this.phoneNum,
                    address: this.address
                }).then(data=>{
                    if (data.data.code == 100000) {
                        this.$message.success("注册成功")
                        Cookie.set("token", data.data.data)
                        this.$router.push("/")
                    } else {
                        this.$message.error(data.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .m {
        height: 100%;
        background-image: url('../static/img/4.jpg');
    }

    .login-1 {

        /*margin-top: 30vh;*/
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        /*height: 30%;*/
        width: 30%;
        margin: -15% 0 0 -15%;

    }

    .input-group {
        margin: 0px auto;
        height: 100px;
        width: 80%;
        display: flex;
        justify-content: flex-start;
        margin-top: 50px;
    }

    .input-group > el-input {
        margin-top: 20px;
    }

    .bt {
        margin: 20px 0px;
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
</style>